<!-- 库房管理-入库管理-委外收货报检单---入库+查看详情操作 -->
<script lang="ts">
import { reactive, watch, nextTick } from "vue";
import { queryReceiptById } from "/@/api/quality/outsourceReceiveCheck";
import { errorMessage } from "/@/utils/message";
export default {
  name: "subItemData",
  props: {
    title: {
      type: String,
      default: "查看详情"
    },
    dialogShow: {
      type: Boolean,
      default: false
    },
    formShow: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    subItemId: {
      type: Number,
      default: 0
    }
  },
  setup(props, ctx) {
    // 入库操作绑定数据
    const subItemData = reactive({
      submitLoading: false,
      title: "", //标题
      formShow: false, //表单显示隐藏
      readonly: false, //是否只读
      subItemId: 0, //操作ID
      dialogShow: false, //操作显示隐藏
      detailData: {} as any
    });
    watch(props, n => {
      console.log(props);
      subItemData.title = n.title;
      subItemData.dialogShow = n.dialogShow;
      subItemData.formShow = n.formShow;
      subItemData.readonly = n.readonly;
      subItemData.subItemId = n.subItemId;
      if (subItemData.dialogShow) {
        queryList();
      }
    });

    // 查看详情
    const queryList = () => {
      subItemData.submitLoading = true;
      queryReceiptById(subItemData.subItemId).then((res: any) => {
        if (res.code === 0) {
          subItemData.detailData = res.data;
        } else {
          errorMessage(res.message);
        }
        subItemData.submitLoading = false;
      });
    };

    const outReceiveClose = () => {
      nextTick(() => {
        subItemData.detailData = {};
        subItemData.submitLoading = false;
      });
      ctx.emit("outReceiveItemClose", false);
      subItemData.dialogShow = false;
      subItemData.formShow = false;
    };
    return {
      subItemData,
      queryList,
      outReceiveClose
    };
  }
};
</script>
<template>
  <div>
    <!-- 查看详情 -->
    <el-dialog
      v-if="subItemData.dialogShow"
      v-model="subItemData.dialogShow"
      :title="subItemData.title"
      width="80%"
      top="7vh"
      :before-close="outReceiveClose"
      :close-on-click-modal="false"
    >
      <el-form
        v-if="subItemData.formShow"
        ref="insertForm"
        id="dialogForm"
        :model="subItemData.detailData"
        label-align="right"
        label-width="120px"
      >
        <el-divider content-position="left">基本信息</el-divider>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="bnoNo" label="单号">
              {{ subItemData.detailData.bnoNo }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="bnoTypeName" label="单据类型">
              {{ subItemData.detailData.bnoTypeName }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="createDate" label="制单日期">
              {{
                subItemData.detailData.createDate
                  ? subItemData.detailData.createDate.split(" ")[0]
                  : ""
              }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="supplierName" label="委外商">
              {{ subItemData.detailData.supplierName }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="storeAddressName" label="存储地点">
              {{ subItemData.detailData.storeAddressName }}
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item prop="userAccount" label="制单人">
              {{ subItemData.detailData.userAccount
              }}{{
                subItemData.detailData.userName
                  ? "&lt;" + subItemData.detailData.userName + "&gt;"
                  : ""
              }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">详情</el-divider>
      </el-form>
      <el-table
        stripe
        :data="subItemData.detailData.outsourceReceiveDetailList"
        border
        fit
        size="mini"
        highlight-current-row
        tooltip-effect="dark"
        :default-expand-all="true"
      >
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column
          prop="outSourceNo"
          label="来源单据"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="batchNo"
          min-width="140"
          label="批号"
        ></el-table-column>
        <el-table-column
          label="品名"
          width="200"
          prop="materialName"
        ></el-table-column>
        <!-- width="300" -->
        <el-table-column
          prop="materialCode"
          label="料号"
          min-width="120"
        ></el-table-column>
        <el-table-column label="应收数量(单位)" width="120">
          <template #default="{ row }">
            {{ row.pcsNum
            }}{{ row.pcsNum && row.pcsUnit ? "(" + row.pcsUnit + ")" : "" }}
          </template>
        </el-table-column>
        <el-table-column label="实收数量(单位)" width="120">
          <template #default="{ row }">
            {{ row.rNum
            }}{{ row.rNum && row.pcsUnit ? "(" + row.pcsUnit + ")" : "" }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="应收重量(单位)" min-width="120">
          <template #default="{ row }">
            {{ row.pcsWeight
            }}{{
              row.pcsWeight && row.weightUnit ? "(" + row.weightUnit + ")" : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="实收重量(单位)" min-width="120">
          <template #default="{ row }">
            {{ row.rWeight
            }}{{
              row.rWeight && row.weightUnit ? "(" + row.weightUnit + ")" : ""
            }}
          </template>
        </el-table-column> -->
        <el-table-column label="目标值(单位)" width="90">
          <template #default="{ row }">
            {{ row.cnvRateVal
            }}{{
              row.cnvRateVal && row.tgtUnitName
                ? "(" + row.tgtUnitName + ")"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="长度(单位)" width="90">
          <template #default="{ row }">
            {{ row.longt
            }}{{
              row.longt && row.lengthUnit ? "(" + row.lengthUnit + ")" : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="宽度(单位)" width="90">
          <template #default="{ row }">
            {{ row.width
            }}{{ row.width && row.widthUnit ? "(" + row.widthUnit + ")" : "" }}
          </template>
        </el-table-column>
        <el-table-column label="厚度/高度(单位)" width="120">
          <template #default="{ row }">
            {{ row.thickness
            }}{{
              row.thickness && row.thicknessUnit
                ? "(" + row.thicknessUnit + ")"
                : ""
            }}
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-button @click="outReceiveClose" size="small">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
@import url("/@/style/dialog.css");
</style>
<style>
.mytable-style .vxe-body--column.col-blue {
  background-color: #60b8ff;
  color: #fff;
}
.mytable-style .vxe-body--column.col-orange {
  background-color: #f56c6c;
  color: #fff;
}
</style>
<style lang="scss" scoped>
.vxe-input + .vxe-button,
.vxe-input + .vxe-button--dropdown,
.vxe-button + .vxe-button,
.vxe-button + .vxe-button--dropdown {
  margin-left: 0;
}

.vxe-toolbar.size--medium {
  padding: 10px;
}

.vxe-table--render-default.size--medium {
  margin-top: 12px;
}

.vxe-button.size--medium.type--button {
  margin-left: 1em;
  height: 32px;
}

.text-model {
  &:hover {
    cursor: pointer;
  }
}
.el-date-editor.el-input__inner,
.el-form-item :deep(.el-date-editor.el-input),
.el-select,
.el-input-number {
  width: 100% !important;
}
</style>
